<template>
  <el-popover
    placement="bottom"
    :width="240"
    :visible="popoverVisible"
    trigger="click"
  >
    <template #reference>
      <div class="input-value-container">
        <el-tooltip
          class="box-item"
          effect="dark"
          style="width: 100%"
          placement="top"
          :disabled="
            disableContentTooltip ||
            !multipleInputText?.length ||
            popoverVisible
          "
        >
          <template #content>
            <div class="content-tooltip" ref="contentTooltipRef">
              {{ multipleInputText }}
            </div>
          </template>
          <el-input
            ref="inputValueRef"
            v-model="showValue"
            v-bind="$attrs"
            clearable
            readonly
            @click="() => changePopoverVisible(true)"
            @blur="handleInputBlur"
          />
        </el-tooltip>
        <div ref="inputValueTextRef" class="myvalue-text">{{ myValue }}</div>
      </div>
    </template>
    <div class="multiple-input">
      <el-input
        v-model="multipleInputText"
        type="textarea"
        style="font-size: 12px"
        :rows="4"
        :maxRows="6"
        clearable
        :placeholder="$t('多个单号用回车隔开')"
        resize="none"
        @focus="() => changePopoverVisible(true)"
        @blur="handleMultipleInputBlur"
      />
    </div>
  </el-popover>
</template>
<script lang="ts" setup>
const props = defineProps({
  modelValue: {
    type: [String],
    default: undefined,
  },
  valueSeparator: {
    type: String,
    default: () => ",",
  },
  showSeparator: {
    type: String,
    default: () => ";",
  },
});
const $attrs = useAttrs();
const myValue = ref<string>();
const showValue = ref<string>();
const multipleInputText = ref<string>();
const popoverVisible = ref(false);
const $emit = defineEmits(["update:modelValue"]);
const inputValueRef = ref();
const inputValueTextRef = ref();
const disableContentTooltip = ref(false);

watch(
  () => props.modelValue,
  (val) => {
    myValue.value = val;
  },
  {
    immediate: true,
  }
);

watch(
  () => myValue.value,
  (val) => {
    nextTick(() => {
      const valueWidth = inputValueTextRef.value.offsetWidth;
      const inputWidth = inputValueRef.value?.input.offsetWidth;
      disableContentTooltip.value = inputWidth > valueWidth;
    });
    if (val) {
      const _value = (val?.split(props.valueSeparator) || []).filter(Boolean);
      showValue.value =
        _value.length > 1 ? _value?.join(props.showSeparator) : _value?.[0];
      multipleInputText.value = _value?.join("\n");
      return;
    }
    showValue.value = val;
    multipleInputText.value = val;
  }
);

const handleMultipleInputBlur = () => {
  const lines = (multipleInputText.value?.split("\n") || []).filter(Boolean);
  let value = lines.length > 1 ? lines.join(props.valueSeparator) : lines?.[0];
  myValue.value = value;
  popoverVisible.value = false;
  $emit("update:modelValue", value);
};

const changePopoverVisible = (val: boolean) => {
  popoverVisible.value = val;
};

const handleInputBlur = () => {
  changePopoverVisible(false);
};
</script>

<style lang="scss" scoped>
.multiple-input {
  padding: 10px;
}

.content-tooltip {
  white-space: pre-line;
}

.input-value-container {
  position: relative;
  width: 100%;

  :deep() {
    .el-input__inner {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .myvalue-text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    visibility: hidden;
  }
}
</style>
